<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <div class="card-toolbar clearfix">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <a class="btn btn-primary m-r-5" href="javascript:void(0)"
                                   @click="openDialogFormVisible"><i class="mdi mdi-plus"></i> 新增</a>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="text" id="example-if-email"
                                       name="example-if-email" placeholder="分类名称" v-model="name"/>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-body" v-loading="loading">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        type="index"
                                        :index="indexMethod"
                                        label="ID"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        align="center"
                                        label="分类名称"
                                        width="80">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row._id)"
                                           style="cursor:pointer;">{{scope.row.name}}</a>
                                    </template>

                                </el-table-column>
                                <!--<el-table-column
                                        prop="focusNum"
                                        label="关注用户"
                                        sortable
                                        width="100">
                                </el-table-column>-->
                                <el-table-column
                                        prop="created_at"
                                        align="center"
                                        label="创建时间"
                                        sortable
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="statusText"
                                        label="推荐状态"
                                        width="140">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="操作">
                                    <template slot-scope="scope">

                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.row._id, scope.row.status-1)"
                                                v-if="scope.row.status">不推荐
                                        </el-button>
                                        <el-button
                                                size="mini"
                                                type="success"
                                                @click="handleEdit(scope.row._id, scope.row.status+1)"
                                                v-if="!scope.row.status">设推荐
                                        </el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row._id, scope.row)">删除
                                        </el-button>

                                        <el-button
                                                size="mini"
                                                type="primary"
                                                @click="editIndustry(scope.row)">编辑
                                        </el-button>

                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐" :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="全部">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCompany">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import common from '../../api/public.js';
    export default {
        name: "CategoryComponent",
        data() {
            return {
                keyword: '',
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                activeIndex: 1,
                name: '',
                orderField: '_id',
                order: 'desc',
                options: [{
                    value: 0,
                    label: '不推荐'
                }, {
                    value: 1,
                    label: '推荐'
                }],
                form: {
                    status: 0,
                    name: ''
                },
                dialogFormVisible: false,
                formLabelWidth: '100px',
                id:"",
                dialogTitle:"创建分类"
            }
        },
        methods: {
            ...common,
            search: function () {
                let self = this;
                let uri = 'category/post-list';
                self.loading = true;

                let postData = {
                    keyword: self.name,
                    page: self.currentPage,
                    limit: self.pageSize,
                    orderField: self.orderField,
                    order: self.order,
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.industries.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.industries.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            indexMethod(index) {
                return index + 1;
            },
            handleEdit(id, status) {
                let self = this;
                let uri = "category/setStatus/" + id + "?status=" + status;
                axios.get(uri).then(function (result) {
                    self.search();
                });
            },
            handleDelete(id, row) {

                let self = this;
                let str = "此操作将永久删除“" + row['name'] + "”这条数据, 是否继续?";

                self.$confirm(str, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire(id) {
                let self = this;
                let uri = "category/" + id;
                axios.delete(uri).then(function (result) {
                    self.search();
                });
            },
            openDialogFormVisible() {
                this.dialogFormVisible = true;
                this.form.status = 0;
                this.form.name = '';
                this.form.dialogTitle = "创建分类";
            },
            sortChange(item) {
                let order = "asc";
                this.orderField = item.prop;
                console.log(item);
                if (item.order === 'descending') {
                    order = "desc";
                }
                this.order = order;
                this.search();
            },
            openEdit: function (id) {
                this.openUri('category/article/' + id);
            },
            editIndustry: function (row) {
                let self = this;
                self.form.name = row.name;
                self.form.status = row.status;
                self.id = row._id;

                this.dialogFormVisible = true;
                this.form.dialogTitle = "编辑分类";
            },
            submitCompany: function () {
                let self = this;

                let uri = 'category/store';
                if (self.id) {
                    uri = 'category/' + self.id;
                }
                self.loading = true;
                let postData = {
                    name: self.form.name,
                    status: self.form.status
                };

                if (self.id) {
                    axios.put(uri, postData).then(function (result) {
                        self.loading = false;
                        self.dialogFormVisible = false;
                        self.search();
                    }).catch(function (error) {
                        self.loading = false;
                    });
                } else {
                    axios.post(uri, postData).then(function (result) {
                        self.loading = false;
                        self.dialogFormVisible = false;
                        self.search();
                    }).catch(function (error) {
                        self.loading = false;
                    });
                }
            }
        },
        mounted: function () {
            this.search();
        }
    }
</script>

<style scoped>
    /*.el-date-editor.el-input, .el-date-editor.el-input__inner {
                width: 130px;
            }*/
    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .card-body .el-input__icon {
        /*height: 100%;
        width: 25px;*/
        width: 0;
        text-align: center;
        -webkit-transition: all .3s;
        transition: all .3s;
        line-height: 40px;
    }
</style>
